一个多层 if / else 嵌套的代码重构案例(JavaScript)

您所在的位置：网站首页 › js 优雅写法 › 一个多层 if / else 嵌套的代码重构案例(JavaScript)

一个多层 if / else 嵌套的代码重构案例(JavaScript)

2023-08-27 14:46| 来源: 网络整理| 查看: 265

背景

日常开发经常会遇到复杂的条件判断, 一般做法就是用if/else, 或者优雅一点用switch来实现多个条件的判断. 如果条件越来越多, 会导致代码越来越臃肿, 如何使用更优雅的方式来实现呢?

案例

先来看一段代码:

const clickHandler = (status) => { if(status === 1) { sendLog('processing') jumpTo('IndexPage') } else if(status === 2) { sendLog('fail') jumpTo('FailPage') } else if(status === 3) { sendLog('fail') jumpTo('FailPage') } else if(status === 4) { sendLog('success') jumpTo('SuccessPage') } else if(status === 5) { sendLog('cancel') jumpTo('CancelPage') } else { sendLog('other') jumpTo('Index') } } 优化1

通过以上代码, 可以看出该函数的作用是: 根据status状态的不同, 发送日志和跳转到对应的页面. 大家可以轻易的使用switch来进行重构:

const clickHandler = (status) => { switch (status) { case 1: sendLog('processing') jumpTo('IndexPage') break case 2: case 3: sendLog('fail') jumpTo('FailPage') break case 4: sendLog('success') jumpTo('SuccessPage') break case 5: sendLog('cancel') jumpTo('CancelPage') break default: sendLog('other') jumpTo('Index') } }

这样看起来比if / else清晰多了. 细心的你一定会发现case2, case3的逻辑是一样的,

优化2

在日常的代码开发中, 基本上大多数同学都是这样写. 这样写固然可以, 但也不太优雅. 有一观点是: 编程的本质, 数据结构 + 算法, 任何算法都包含两部分, Logic + Control

Logic部分就是真正意义上的算法 Control部分只是影响解决问题的效率.

如果我们能将 Logic 和 Control部分有效地分开, 那么代码将会变得更加容易维护和改进.

比如, 我们试着用下面的办法去分离代码:

const actions = { '1': ['processing', 'IndexPage'], '2': ['fail', 'FailPage'], '3': ['fail', 'FailPage'], '4': ['success', 'SuccessPage'], '5': ['cancel', 'CancelPage'], 'default': ['other', 'Index'] } const clickHandler = (status) => { let action = actions[status] || actions['default'], LogName = action[0], pageName = action[1] sendLog(LogName) jumpTo(pageName) }

这样的形式, 其实就是DSL(Domain Specific Language)解析器. DSL的描述是一个Logic, 函数clickHandler就是Control部分, 代码大大简化,

小结

由此可以总结出如下思想:

State Machine 状态定义状态变迁条件状态的action DSL - Domain Specific Language HTML, SQL, 正则表达式...... 编程范式面向对象: 委托, 桥接, 修饰, MVC....... 函数式编程: 修饰, 管道, 拼接逻辑推导式编程优化3

继续优化. 看看是不是还有其他写法?答案是, 有的

const actions = new Map([ ['1', ['processing', 'IndexPage']], ['2', ['fail', 'FailPage']], ['3', ['fail', 'FailPage']], ['4', ['success', 'SuccessPage']], ['5', ['cancel', 'CancelPage']], ['default', ['other', 'Index']] ]) const clickHandler = (status) => { let action = actions.get(status) || actions.get('default') sendLog(action[0]) jumpTo(action[1]) } 新需求1

有新的需求过来, 原先只是判断status的状态, 现在还需要判断用户的身份.

const clickHandler = (status, identity) => { if(identity == 'guest') { if(status === 1) { // to do something } else if (status === 2) { // to do something } else if (status === 3) { // to do something } else if (status === 4) { // to do something } else if (status === 5) { // to do something } else { // to do something } } else if(identity == 'master') { if(status === 1) { // to do something } else if (status === 2) { // to do something } else if (status === 3) { // to do something } else if (status === 4) { // to do something } else if (status === 5) { // to do something } else { // to do something } } }

又用了if / else来解决问题(里面的逻辑就没有写了, 因为代码太长了). 但当有两个层级的判断条件时, 如果还是用if / else, 代码量会加倍. 此时, 我们该如何写更优雅呢?

const actions = {new Map([ ['guest_1', () => {/* to do something */}], ['guest_2', () => {/* to do something */}], ['guest_3', () => {/* to do something */}], ['guest_4', () => {/* to do something */}], ['guest_5', () => {/* to do something */}], ['master_1', () => {/* to do something */}], ['master_2', () => {/* to do something */}], ['master_3', () => {/* to do something */}], ['master_4', () => {/* to do something */}], ['master_5', () => {/* to do something */}], ['default', () => {/* to do something */}], ])}

上述代码的逻辑是:

把两个条件拼接成字符串以拼接的条件字符串作为key, 以处理函数作为值的Map对象进行查找并执行

当然, 也可以用Object对象来实现(这也是大家常用的)

const actions = { 'guest_1': () => {/* to do something */}, 'guest_2': () => {/* to do something */}, 'guest_3': () => {/* to do something */}, 'guest_4': () => {/* to do something */}, 'guest_5': () => {/* to do something */}, 'master_1': () => {/* to do something */}, 'master_2': () => {/* to do something */}, 'master_3': () => {/* to do something */}, 'master_4': () => {/* to do something */}, 'master_5': () => {/* to do something */}, 'default': () => {/* to do something */} }

可能有些同学会觉得把查询条件拼接成字符串会不太优雅, 还有一种方案, 就是用Map对象, 以Object对象作为Key:

const actions = new Map([ [{identity: 'guest', status: 1}, () => {/* to do something */}], [{identity: 'guest', status: 2}, () => {/* to do something */}] [{identity: 'guest', status: 3}, () => {/* to do something */}] ]) const clickHandler = (identity, status) { let action = [...actions].filter((key, value) => {key.identity === identity && key.status === status}) action.forEach(([key, value]) => {value.call(this)}) }

这样会不会更优雅一点.

Map与Object的区别: Map可以用任何类型的数据作为key

新需求2

假如在guest情况下, status 1~4 的处理逻辑是一样的, 最差的情况是:

functionA(){ // to do something } functionB(){ // to do something } const actions = new Map([ [{identity: 'guest', status: 1}, functionA], [{identity: 'guest', status: 2}, functionA], [{identity: 'guest', status: 3}, functionA], [{identity: 'guest', status: 4}, functionA], [{identity: 'guest', status: 5}, functionB], ]) const clickHandler = (identity, status) { let action = [...actions].filter((key, value) => {key.identity === identity && key.status === status}) action.forEach(([key, value]) => {value.call(this)}) }

这样写, 基本也满足需求了, 但重复的写4次functionA, 还是觉得有点不舒服(不过现在能够满足需求了, 好像也没什么关系了). 但如果identity的状态有3种, status的状态有30种呢? 难道......

如果是此种情况, 也可以考虑用正则表达式, 如:

functionA(){ // to do something } functionB(){ // to do something } const actions = new Map([ [/^guest_[1-4]$/, functionA], [/^guest_5$/, functionA], ]) const clickHandler = (identity, status) { let action = [...actions].filter((key, value) => {key.test(`${identity}_${status}`)}) action.forEach(([key, value]) => {value.call(this)}) }

用Map的优势就很明显了, 可以用正则表达式类型作为key, 这样就可以满足更多的需求了. 假如需求变成, 凡是guest的情况, 都要发送一个日志埋码, 不同的status的情况, 也要单独做处理. 那么我们可以考虑这样写:

functionA(){ // to do something } functionB(){ // to do something } functionC(){ // to do something } const actions = new Map([ [/^guest_[1-4]$/, functionA], [/^guest_5$/, functionA], [/^guest_.$/, functionC], ]) const clickHandler = (identity, status) { let action = [...actions].filter((key, value) => {key.test(`${identity}_${status}`)}) action.forEach(([key, value]) => {value.call(this)}) }

利用数组循环的特性, 符合正则表达式条件的逻辑都会执行. 这样就可以同时执行公共逻辑和单独逻辑

总结

本文核心讲逻辑(Logic)和控制(Control)如何分离, 如果将所有的程序能够很好的分离, 那么代码的可维护性将会大大提高. 代码除了要运行, 可读性也是很重要的!

本文转到: 一个多层 if / else 嵌套的代码重构案例

【本文地址】

一个多层 if / else 嵌套的代码重构案例(JavaScript)

一个多层 if / else 嵌套的代码重构案例(JavaScript)

今日新闻

推荐新闻